<template>
    <div class="shopcart-container">
      <div>
      <div class="titleBox flex">
        <p class="title">待付款</p>
      </div>
      <div><button class="controlButton" @click="edit">{{isedit?'编辑':'完成'}}</button></div>
      <div class="goods-list" v-if="total">
        <div class="mui-card" v-for="(item,index) in this.cart" :key="index">
          <div class="mui-card-content">
            <div class="mui-card-content-inner flex">
              <div class="mui-input-row mui-checkbox mui-left">
                <label></label>
                <input type="checkbox" @click="selectChange(item)" v-model="item.selected" />
              </div>
              <div class="img_box" @click="detail(item)">
                <img :src="item.url" alt="" class="img" />
              </div>
              <p class='detail'>{{item.detail}}</p>
            </div>
            <div class="flex">
              <p class="price">{{item.price | money}}</p>
              <numbox :id='item.id' :count='item.count' class="numbox"></numbox>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="void-box">
        <div class="voidcart_img">
          <img src="@/assets/yizhifu.png" alt="" class="img" width="100%">
        </div>
        <div class="text"><p class="void-text">已全部支付</p></div>
      </div>

      </div>
      <div class="pay-container">
        <div class="pay-content flex">
          <div class="mui-input-row mui-radio mui-left">
            <label>全选</label>
            <input name="radio1" type="radio" @click="selectAll">
          </div>
          <div class="totalPriceBox flex">
            <p class="total" style="color: #000000;">总计：</p>
            <p class="total">{{totalPrice | money}}</p>
          </div>
          <div class="payButtonBox">
            <button type="button" class="mui-btn mui-btn-danger payButton" @click="pay" v-if="isedit">结算<span
                class="mui-badge mui-badge-danger">({{totalSelected}})</span></button>
            <button type="button" class="mui-btn mui-btn-danger payButton" @click="del" v-else>删除<span
                class="mui-badge mui-badge-danger">({{totalSelected}})</span></button>
          </div>
        </div>
      </div>
    </div>
  </template>

  <script>
    import numbox from '@/components/num_box.vue'
    import {
      mapState,
      mapGetters
    } from 'vuex'
    import BScroll from 'better-scroll'
    export default {
      data() {
        return {
          isedit: true,
          isSelectAll: false
        }
      },
      components: {
        numbox
      },
      computed: {
        ...mapState({
          cart: state => state.shopcart.cart
        }),
        ...mapGetters('shopcart', {
          total: 'getTotalGoodsCount',
          totalPrice: 'getTotalPrice',
          totalSelected: 'getTotalSelected'
        }),
      },
      mounted () {
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          this.scroll = new BScroll('.shopcart-container', {
            click: true,
            mouseWheel: true
          })
        })
      },
      methods: {
        selectChange(item) {
          item.selected = !item.selected
        },
        selectAll() {
          this.isSelectAll = !this.isSelectAll
          if(this.isSelectAll){
            this.cart.forEach(item => item.selected = true)
          }else{
            this.cart.forEach(item => item.selected = false)
          }
        },
        edit() {
          this.isedit = !this.isedit
        },
        del() {
          //js的数组删除只能用splice不指定数量就删完了，pop只能删最后一个
          var arr = []
          this.cart.forEach(item => {
            if(!item.selected){
              arr.push(item)
            }
          })
          this.$store.commit('shopcart/delShopcart', arr)
        },
      pay() {
        if (this.totalSelected) {
          this.$router.push('/pay')
          this.$store.state.onHomePage = false
        }
      },
      detail(item){
        this.$router.push(item.path)
      }
      },
      filters: {
        money(str) {
          return '$' + str
        }
      },
      watch: {

      }
    }
  </script>

  <style scoped>
  .text{
    margin-top: 30px;
  }
  .voidcart_img{
    margin-bottom: 5px;
  }
    .flex {
      display: flex;
    }

    .shopcart-container {
      height: 850px;
      overflow: hidden;
      background: #eee;
    }

    .titleBox {
      height: 50px;
      background-color: #fd4170;
      text-align: center;
    }

    .title {
      color: #000000;
      font-size: 20px;
      line-height: 15px;
      text-align: center;
      font-weight: 550;
      padding-left: 20px;
      padding-top: 28px;
      flex: 1;
      display: block;
      color:#fff;
    }

    .controlButton {
      color: #fff;
      background:#fd4170;
      border: none;
      position: fixed;
      right: 10px;
      top: 10px;
      font-size: medium;
    }

    .mui-card {
      height: 150px;
    }

    .img_box {
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }

    .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .price {
      font-size: 20px;
      color: brown;
      margin-left: 85px;
      margin-top: 5px;
    }

    .numbox {
      margin-left: 140px;
    }

    .detail {
      color: #000000;
      font-size: 15px;
    }

    .void-box {
      width: auto;
      height: 400px;
      text-align: center;
      padding-top: 50px;
    }

    .void-text {
      font-size: 25px;
    }

    .voidcart_img {
      width: 150px;
      height: 150px;
      margin: 1px auto;
    }

    .pay-container {
      width: 100%;
      height: 110px;
      background: white;
      padding-top: 12px;
      position: fixed;
      bottom: 0;
    }

    .total {
      font-size: 20px;
      color: brown;
    }

    .totalPriceBox {
      margin-top: 8px;
      margin-left: 90px;
    }

    .payButtonBox {
      position: fixed;
      right: 10px;
    }
  </style>
